<template>
  <div class="myfooter">
    <ul class="footer-link">
      <li 
        v-for="(block, index) of linkData"
        :key="index"
        class="block"
      >
        <dl 
          v-for="item of block"
          :key="item.title"
          class="block-item"
        >
          <dt class="title">{{ item.title }}</dt>
          <dd
            v-for="child of item.items"
            :key="child"
            class="child"
          >{{ child }}</dd>
        </dl>
      </li>
    </ul>
    <div class="footer-copyright">
      <div class="left">
        <p>
          ©美团网团购 meituan.com<a href="http://www.beianbeian.com/beianxinxi/283f39a9-4c00-427a-97ef-3c7a9e1e0af1.html">京ICP证070791号</a><a href="http://www.miitbeian.gov.cn/">京ICP备10211739号</a><a 
            href="https://www.meituan.com/about/rules" 
            target="_blank"
          >电子公告服务规则</a>
        </p>
        <p>
          <a 
            href="https://i.meituan.com/brunch/default/right" 
            target="_blank"
          >广播电视节目制作经营许可证（京）字第03889号</a>
        </p>
      </div>
      <div class="right">
        <a 
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502025545" 
          target="_blank"
        >京公网安备11010502025545号</a>
        <div class="copyright-cert">
          <a 
            class="sp-ft sp-ft--record" 
            href="https://www.meituan.com/about/openinfo" 
            title="备案信息" 
            target="_blank"
          >备案信息</a><a 
            class="sp-ft sp-ft--knet" 
            href="http://t.knet.cn/index_new.jsp" 
            title="可信网站认证" 
            target="_blank"
          >可信网站</a><a 
            class="sp-ft sp-ft--12315" 
            href="http://www.bj315.org/xfwq/lstd/201209/t20120910_3344.shtml?dnrpluojqxbceiqq" 
            title="12315消费争议" 
            target="_blank"
          >12315消费争议</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      linkData: [
        [
          {
            title: '用户帮助',
            items: ['申请退款', '查看美团券密码', '常见问题', '用户协议', '隐私政策', '反诈骗公告']
          },
          {
            title: '美团服务',
            items: ['美团外卖', '美团酒店', '猫眼电影', '美团配送', '美团云', '大众点评', '榛果民宿', '无人配送']
          }
        ],
        [
          {
            title: '商家合作',
            items: ['美食商家入驻(非外卖)', '美团外卖开店申请', '美团收银官网', '外卖配送加盟申请', '美团点评餐饮学院', '酒店商家入驻', '境内度假商家入驻', '综合商家入驻', '榛果民宿房东商家入驻', '商家开票申请', '美团点评智能收银机', '聚宝盆餐饮开放平台', '美团智能支付', '美团排队', '快驴进货商家合作']
          }
        ],
        [
          {
            title: '代理商加盟',
            items: ['智能支付渠道加盟商招募', '到店餐饮代理商招募', '非餐饮代理商招募', '美团联盟', '美团收银招募线上分销商', '美团点评5S服务商招募']
          },
          {
            title: '行业规范',
            items: ['美团点评餐饮安全管理办法']
          },
          {
            title: '廉正举报',
            items: ['廉政邮箱']
          }
        ],
        [
          {
            title: '关注美团',
            items: ['美团新浪微博']
          },
          {
            title: '公司信息',
            items: ['关于我们', '投资者关系', '加入我们', '法律声明', '商户服务协议', '商户诚信公约及管理办法']
          }
        ],
        [
          {
            title: '消费者服务热线',
            items: ['外卖消费者：10109777', '猫眼消费者：10105335', '其他消费者：10107888']
          },
          {
            title: '商家服务热线',
            items: ['外卖&餐饮商家：10105557', '休闲娱乐、丽人、ktv、教育、结婚、亲子、家装等商家：10100107']
          },
          {
            title: '投诉举报热线',
            items: ['违法和不良信息举报电话：4006018900', '举报邮箱：tousujubao@meituan.com']
          },
          {
            title: '商家自助入驻美团入口',
            items: ['']
          },
        ]
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .myfooter
    width 1190px
    margin 40px auto 0
    color #333333
    font-size 12px
    line-height 2
    box-sizing border-box
    .footer-link
      padding 40px 45px
      border-top 1px solid #e5e5e5
      border-bottom 1px solid #e5e5e5
      &::after
        content ''
        display block
        visibility hidden
        clear both
      .block
        float left
        width 20%
        .block-item
          padding-bottom 20px
          color #666
          .title
            font-size 14px
            font-weight 500
            cursor default
          .child
            letter-spacing normal
            cursor pointer
            &:hover
              color #31BBAC
        &:last-child
          .block-item:last-child
            .title
              &:hover
                color #31BBAC
    .footer-copyright
      padding-left 20px
      padding-top 15px
      padding-bottom 30px
      line-height 1.6
      color #999999
      p
        cursor default
      a
        color #999999
        &:hover
          color #31BBAC
      .left
        float left
      .right
        float right
        margin-right 20px
        text-align right
        .copyright-cert
          padding-top 6px
          text-align left 
          .sp-ft
            overflow hidden
            display inline-block
            text-indent -1000px
            height 38px
            background-image url('~@/assets/img/footer.png')
            background-repeat no-repeat
            margin-right 2px
          .sp-ft--record
            width 109px
            background-position 0 -167px
          .sp-ft--knet
            width 107px
            background-position 0 -127px
          .sp-ft--12315
            width 107px
            background-position 0 -40px
  @media screen and (max-width 1200px)
    .myfooter
      width 950px !important 
</style>
